import 'package:flutter/material.dart';

class TestBottomSheetPage extends StatefulWidget {
  const TestBottomSheetPage({Key? key}) : super(key: key);

  @override
  State<TestBottomSheetPage> createState() => _TestBottomSheetPageState();
}

class _TestBottomSheetPageState extends State<TestBottomSheetPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("test bottom sheet page")),
      body: Stack(
        children: [
          Column(
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const SizedBox(height: 20, width: double.infinity),
              ElevatedButton(
                onPressed: () {
                  _showModal(context);
                },
                child: const Text("no scroll bottom sheet 固定高度"),
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  _showModal1(context);
                },
                child: const Text("no scroll bottom sheet 自适应高度"),
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  _showScrollModal(context);
                },
                child: const Text("can scroll bottom sheet，这种方法点击空白处无法关闭 [no use]"),
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  _showScrollModal1(context);
                },
                child:
                    const Text("can scroll bottom sheet [no use],需要重写modal route，见comic ep list"),
              ),
            ],
          ),
          DraggableScrollableSheet(
            initialChildSize: 0.25,
            // minChildSize: 0.25,
            minChildSize: 0.1,
            maxChildSize: 1.0,
            builder: (context, scrollController) {
              return Container(
                color: Colors.grey,
                child: ListView.builder(
                  // scrollController传入listview以联动
                  controller: scrollController,
                  itemBuilder: (context, index) {
                    return Text("$index");
                  },
                  itemCount: 100,
                ),
              );
            },
          ),
        ],
      ),
    );
  }

  // no use
  void _showScrollModal1(BuildContext context) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) {
          return Scaffold(
            backgroundColor: Colors.transparent,
            body: DraggableScrollableSheet(
              initialChildSize: 0.3,
              minChildSize: 0.1,
              maxChildSize: 1,
              builder: (BuildContext context, ScrollController scrollController) {
                return SingleChildScrollView(
                  controller: scrollController,
                  child: Container(
                    color: Colors.blue,
                    child: ListView.builder(
                      shrinkWrap: true,
                      physics: const NeverScrollableScrollPhysics(),
                      // scrollController传入listview以联动
                      itemBuilder: (context, index) {
                        return Text("$index");
                      },
                      itemCount: 100,
                    ),
                  ),
                );
              },
            ),
          );
        },
      ),
    );
  }

  // no use
  void _showScrollModal(BuildContext context) {
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      backgroundColor: Colors.transparent,
      builder: (context) {
        return DraggableScrollableSheet(
          initialChildSize: 0.3,
          minChildSize: 0.1,
          maxChildSize: 1,
          builder: (BuildContext context, ScrollController scrollController) {
            return SingleChildScrollView(
              controller: scrollController,
              child: Container(
                color: Colors.grey,
                child: ListView.builder(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  // scrollController传入listview以联动
                  itemBuilder: (context, index) {
                    return Text("$index");
                  },
                  itemCount: 100,
                ),
              ),
            );
          },
        );
      },
    );
  }

  void _showModal(BuildContext context) {
    showModalBottomSheet(
      context: context,
      // 设为true，此时为全屏展示，但背景是透明的，false为整个sheet半屏
      isScrollControlled: true,
      builder: (BuildContext context) {
        return SizedBox(
          height: 400,
          child: Column(
            children: <Widget>[
              Container(
                height: 200,
                margin: const EdgeInsets.only(left: 60, right: 60, top: 30),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    TextButton(
                      child: Column(
                        children: const <Widget>[
                          SizedBox(height: 10),
                          Icon(Icons.shop, size: 80),
                          SizedBox(height: 10),
                          Text("软件商店"),
                        ],
                      ),
                      onPressed: () => "",
                    ),
                    TextButton(
                      child: Column(
                        children: const <Widget>[
                          SizedBox(height: 10),
                          Icon(Icons.shop, size: 80),
                          SizedBox(height: 10),
                          Text("UC浏览器"),
                        ],
                      ),
                      onPressed: () => "",
                    ),
                  ],
                ),
              ),
              const SizedBox(
                height: 20,
              ),
              const Divider(
                height: 1,
                color: Colors.black,
                indent: 60,
                endIndent: 60,
              ),
              ListTile(
                title:
                    const Text('取消', style: TextStyle(fontSize: 20), textAlign: TextAlign.center),
                onTap: () {
                  Navigator.of(context).pop();
                },
              ),
            ],
          ),
        );
      },
    );
  }

  void _showModal1(BuildContext context) {
    showModalBottomSheet(
      context: context,
      // 设为true，此时为最大可全屏展示
      isScrollControlled: true,
      builder: (BuildContext context) {
        // SingleChildScrollView使得其自适应子widget大小
        // 自适应关键点：isScrollControlled: true, SingleChildScrollView
        return SingleChildScrollView(
          child: Column(
            children: <Widget>[
              Container(
                margin: const EdgeInsets.only(left: 60, right: 60, top: 30),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    TextButton(
                      child: Column(
                        children: const <Widget>[
                          SizedBox(height: 10),
                          Icon(Icons.shop, size: 80),
                          SizedBox(height: 10),
                          Text("软件商店"),
                        ],
                      ),
                      onPressed: () => "",
                    ),
                    TextButton(
                      child: Column(
                        children: const <Widget>[
                          SizedBox(height: 10),
                          Icon(Icons.shop, size: 80),
                          SizedBox(height: 10),
                          Text("UC浏览器"),
                        ],
                      ),
                      onPressed: () => "",
                    ),
                  ],
                ),
              ),
              const SizedBox(
                height: 20,
              ),
              const Divider(
                height: 1,
                color: Colors.black,
                indent: 60,
                endIndent: 60,
              ),
              ListTile(
                title:
                    const Text('取消', style: TextStyle(fontSize: 20), textAlign: TextAlign.center),
                onTap: () {
                  Navigator.of(context).pop();
                },
              ),
            ],
          ),
        );
      },
    );
  }
}

class FadeRoute1 extends PageRouteBuilder {
  // 传过来的页面page
  final Widget page;
  final RouteSettings routeSettings;

  // 构造
  FadeRoute1(this.page, this.routeSettings)
      : super(
          pageBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
          ) =>
              page,
          transitionsBuilder: (
            BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child,
          ) =>
              FadeTransition(
            opacity: animation, // 透明度
            child: child, // 页面存放
          ),
          settings: routeSettings,
        );
}
